<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新拟态计算器样式</title>
    <style>
        /* 居中设置 */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #eeeeee;
        }

        .calculator {
            /* 计算器按钮大小，都设置为80px */
            --button-width: 80px;
            --button-height: 80px;

            /* 4列6行 */
            display: grid;
            grid-template-areas: "result result result result"
                "ac plus-minus percent divide"
                "number-7  number-8 number-9 multiply"
                "number-4  number-5 number-6 subtract"
                "number-1  number-2 number-3 add"
                "number-0  number-0 dot equal";

            /* 设置横向列大小 */
            /* repeat函数，重复4次 */
            grid-template-columns: repeat(4, var(--button-width));
            /* 设置纵向列大小 */
            grid-template-rows: repeat(6, var(--button-height));

            /* 加入阴影--拟态化 */
            box-shadow: -8px -8px 16px -10px rgba(255, 255, 255, 1),
                8px 8px 16px -10px rgba(0, 0, 0, .15);
            padding: 24px;
            border-radius: 20px;
        }

        /* 按钮部分样式 */
        .calculator button {
            margin: 8px;
            padding: 0;
            border: 0;
            display: block;
            outline: none;
            /* 圆角设置为按钮高度一半 */
            border-radius: calc(var(--button-height)/2);
            font-size: 24px;
            font-family: 'Helveica';
            font-weight: normal;
            color: #999;
            /* 设置按钮的背景颜色， 这里用到渐层颜色 */
            background: linear-gradient(135deg, rgba(230, 230, 230, 1) 0%,
                    rgba(246, 246, 246, 1) 100%);
            /* 设置阴影 */
            box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1),
                4px 4px 10px -8px rgba(0, 0, 0, .3);
        }

        /* 按钮按下去的样式 */
        .calculator button:active {
            /* 阴影由外部改为内部 */
            box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1),
                4px 4px 10px -8px rgba(0, 0, 0, .3) inset;
        }

        /* 结果行 的样式设置 */
        .result {
            text-align: right;
            line-height: var(--button-height);
            font-size: 48px;
            font-family: 'Helveica';
            padding: 0 20px;
            color: #666;
        }
    </style>
</head>

<body>
    <div class="calculator">
        <!-- 显示计算器结果 -->
        <div class="result" style="grid-area: result;">0</div>
        <!-- 8个功能按钮 -->
        <button style="grid-area: ac;">AC</button>
        <button style="grid-area: plus-minus;">&#177;</button>
        <button style="grid-area: percent;">%</button>
        <button style="grid-area: add;">+</button>
        <button style="grid-area: subtract;">-</button>
        <button style="grid-area: multiply;">x</button>
        <button style="grid-area: divide;">&#247;</button>
        <button style="grid-area: equal;">=</button>

        <!-- 10个数字按钮 -->
        <button style="grid-area: number-1;">1</button>
        <button style="grid-area: number-2;">2</button>
        <button style="grid-area: number-3;">3</button>
        <button style="grid-area: number-4;">4</button>
        <button style="grid-area: number-5;">5</button>
        <button style="grid-area: number-6;">6</button>
        <button style="grid-area: number-7;">7</button>
        <button style="grid-area: number-8;">8</button>
        <button style="grid-area: number-9;">9</button>
        <button style="grid-area: number-0;">0</button>

        <!-- 小数点按钮 -->
        <button style="grid-area: dot;">.</button>
    </div>
</body>

</html>